<template>
	<view class="container">
		<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0">
			<view v-show="state.role == ROLE_USER">
				<!-- <view v-show="!state.userOrders.length" class="d-flex w-100 h-100 flex-column just-content-center align-items-center">
					<image src="/static/images/loading.gif" class="drinks-img"></image>
					<view class="tips d-flex flex-column align-items-center font-size-base text-color-assist">
						<view>您还没有订单</view>
						<view>快去犒劳一下自己吧~</view>
					</view>
					<button type="primary" class="drink-btn" size="default" @tap="menu">去购物</button>
				</view> -->

				<scroll-view

					@refresherrefresh="refresh()"
					:refresher-triggered="triggerFresh"
					:refresher-enabled="true"
					:style="{ height: availableHeight + 'px' }"
					scroll-y="true"
					@scrolltolower="lowerUser"
				>
					<orders :orders="state.userOrders" />
				</scroll-view>
			</view>

			<view v-show="state.role == ROLE_MER">
		<!-- 		<view  class="d-flex w-100 h-100 flex-column just-content-center align-items-center">
					<image src="/static/images/loading.gif" class="drinks-img"></image>
					<view class="tips d-flex flex-column align-items-center font-size-base text-color-assist">
						<view>今日还未开单</view>
						<view>继续加油呀~</view>
					</view>
				</view> -->

				<scroll-view
					v-show="state.busOrders.length"
					@refresherrefresh="refresh()"
					:refresher-triggered="triggerFresh"
					:refresher-enabled="true"
					:style="{ height: availableHeight + 'px' }"
					scroll-y="true"
					@scrolltolower="lowerBus"
				>
					<orders :orders="state.busOrders" />
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import orders from '../components/orders.vue';
import { onMounted, ref } from 'vue';
import { state, ROLE_MER, ROLE_USER } from '../../store/user';
import getOrders from '../../vendor/order_food/order';
import { setBaseHeight } from '@/store/global';
import { onPullDownRefresh } from '@dcloudio/uni-app';
const { getList, getBusList } = getOrders();
const triggerFresh = ref(false);

const availableHeight = ref(0);
onMounted(() => {
	calHeight();
});

const menu = () => {
	uni.switchTab({
		url: '/pages/tabbar/index'
	});
};

const calHeight = () => {
	setBaseHeight((height: number) => {
		availableHeight.value = height;
	});
};

const lowerUser = () => {
	// 用户数据触底
	getList();
};
const lowerBus = () => {
	// 商家数据触底
	getBusList();
};

let isFreshing = false;

const refresh = () => {
	if (isFreshing) return;
	isFreshing = true;
	if (!triggerFresh.value) {
		triggerFresh.value = true;
	}

	if (state.role == ROLE_MER) {
		state.busOrders.length = 0;
		state.busOrderPage = 1;

		getBusList(() => {
			triggerFresh.value = false;
			isFreshing = false;
			uni.stopPullDownRefresh();
		});
	} else if (state.role == ROLE_USER) {
		state.userOrders.length = 0;
		state.userOrderPage = 1;

		getList(() => {
			triggerFresh.value = false;
			isFreshing = false;
			uni.stopPullDownRefresh();
		});
	}
};
</script>

<style lang="scss" scoped>
:deep(.uni-collapse-item__title-box) {
	padding: 0 !important;
}
</style>
